<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, onBeforeUnmount } from 'vue'
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
})

const [startValue, endValue] = [0, 4]
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    // itemGap: 50,
    top: '-3%',
    data: ['隐患处理总数'],
    textStyle: {
      color: '#f9f9f9',
      borderColor: '#fff',
    },
  },
  grid: {
    top: '23%',
    right: '10%',
    left: '13%',
    bottom: '15%',
  },
  // 控制显示几个柱子
  dataZoom: {
    show: false,
    startValue,
    endValue,
  },
  // dataZoom: {
  //     type: 'inside',
  //     maxValueSpan: 14
  // },
  xAxis: [
    {
      type: 'category',
      data: props.xData,
      axisLine: {
        lineStyle: {
          color: '#02387B',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        margin: 10,
        color: 'rgba(255,255,255,1)',
        textStyle: {
          fontSize: 12,
        },
        formatter: function (e) {
          //   console.log('@e===', e)
          //   let str = ''
          //   let arr = e.split('')
          //   for (let i = 0; i < arr.length; i++) {
          //     str += arr[i] + '\n'
          //   }
          return e
        },
      },
    },
  ],
  yAxis: [
    {
      name: '个',
      nameTextStyle: {
        align: 'right',
      },
      axisLabel: {
        formatter: '{value}',
        color: 'rgba(255,255,255,0.52)',
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(108, 128, 151, 0.3)',
        },
      },
    },
  ],
  series: [
    {
      name: '隐患处理总数',
      type: 'bar',
      data: props.sData,
      label: {
        normal: {
          position: 'top',
          color: '#fff',
          show: true,
        },
      },
      barWidth: 20,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#15F7FF',
            },
            {
              offset: 1,
              color: '#15FFC5',
            },
          ]),
        },
      },
    },
  ],
}
function _clearInterval(timeId) {
  timeId && window.clearInterval(timeId)
}
const chart = ref()
// const timer1 = ref()
let timer1 = null
onMounted(() => {
  chart.value.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(chart.value)
  // _clearInterval(timer)
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    // 在窗口尺寸变化时重新刷新图表
    myChart.resize()
  })
  // 使用定时器
  timer1 = setInterval(() => {
    const item1 = props.xData.shift()
    props.xData.push(item1)
    const item2 = props.sData.shift()
    props.sData.push(item2)
    myChart.setOption({
      series: {
        data: props.sData,
        type: 'bar',
      },
      xAxis: {
        type: 'category',
        data: props.xData,
      },
    })
  }, 2000)
})
onBeforeUnmount(() => {
  _clearInterval(timer1)
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
